<template>
  <div>
    <ul>
      <li class="goods-item" v-for="goods in goodList" :key="goods.goodsId">
        <img :src="goods.goodsImg" />
        <div>{{goods.goodsTitle}}</div>
      </li>
    </ul>
  </div>
</template>
<script>
export default {
  data() {
    return {
      goodList: []
    }
  },
  props: {
    goodsId: Number
  },
  mounted() {
    this.getGoods(this.goodsId) 
  },
  watch: {
    goodsId(newData, oldData) {
      this.getGoods(newData)
    }
  },
  methods: {
    getGoods(goodsId) {
      let _this = this
      // 判断 goodsId 是否为 0 ，热门推荐
      if (goodsId === 0) {
        this.$http.get('./data/bjb.json')
          .then(function(res) {
            // console.log(res.data)
            _this.goodList = res.data
          })
      } else if(goodsId === 1){
        this.$http.get('./data/bjb.json')
          .then(function(res) {
            // console.log(res.data)
            _this.goodList = res.data
          })
      } else if(goodsId === 2){
        this.$http.get('./data/sj.json')
          .then(function(res) {
            // console.log(res.data)
            _this.goodList = res.data
          })
      } else{
        this.$http.get('./data/bjb.json')
          .then(function(res) {
            // console.log(res.data)
            _this.goodList = res.data
          })
      }

    }
  }
}
</script>
<style>
  .goods-item {
    float: left;
    margin: 20px;
  }
</style>